<template>
  <!--头部-->
  <div class="shou-main">
    <el-row>
      <button @click="str">点击</button>
      <el-col :span="3" :xs="3"><el-link id="sy">我的订单</el-link></el-col>
      <el-col :span="3" :xs="3"
        ><el-dropdown placement="bottom">
          <el-link>我的服务 <i class="el-icon-arrow-down"></i></el-link>
          <el-dropdown-menu>
            <el-dropdown-item
              ><el-link>订单 <i class="el-icon-s-shop"></i></el-link>
              <el-badge :value="0"
                ><el-link> 消息 <i class="el-icon-s-comment"></i></el-link
              ></el-badge>
            </el-dropdown-item>
          </el-dropdown-menu> </el-dropdown
      ></el-col>
      <el-col :span="3" :xs="3"
        ><router-link to="/book">小说书城</router-link></el-col
      >
      <el-col :span="3" :xs="3"
        ><router-link to="/shop">时尚衣柜</router-link></el-col
      >
      <el-col :span="3" :xs="3">
        <el-dropdown placement="bottom">
          <el-link>客户服务 <i class="el-icon-arrow-down"></i></el-link>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-link
                ><router-link to="/video">电影走廊</router-link
                ><i class="el-icon-phone"></i
              ></el-link>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
      <el-col :span="3" :xs="3"
        ><el-link
          ><router-link to="/center">管理中心</router-link>
          <i class="el-icon-arrow-down"></i></el-link
      ></el-col>
      <el-col :span="3" :xs="3"
        ><el-link class="info"> <i class="el-icon-user"></i>{{ admin }} </el-link>
        <div v-if="admin" class="userInfo">
          <el-tag @click="userInfoShow">用户信息</el-tag>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="4" :xs="4"
        ><el-image src="/static/img/beij.jpg"></el-image
      ></el-col>
      <el-col :span="15" :xs="24">
        <el-row>
          <el-row>
            <el-col :span="24" :xs="24">
              <el-autocomplete
                style="width: 80%; margin-top: 10px"
                class="inline-input"
                v-model="form.sou"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                @select="handleSelect"
              >
                <el-select
                  v-model="xz"
                  placeholder="请选择"
                  slot="prepend"
                  @change="it"
                >
                  <el-option
                    v-for="q in item"
                    :key="q.label"
                    :label="q.label"
                    :value="q.value"
                  >
                  </el-option>
                </el-select>
                <el-button
                  type="info"
                  slot="append"
                  class="el-icon-search"
                ></el-button>
              </el-autocomplete>
              <el-button type="primary" class="el-icon-shopping-cart-full"
                >购物车</el-button
              >
            </el-col>
          </el-row>
          <el-col :span="24" :xs="24">
            <el-breadcrumb
              separator="|"
              style="
                text-align: center;
                padding-left: 15%;
                margin-top: 10px;
                margin-bottom: 10px;
              "
            >
              <el-breadcrumb-item>限时秒</el-breadcrumb-item>
              <el-breadcrumb-item>食品饮料</el-breadcrumb-item>
              <el-breadcrumb-item>限时7折</el-breadcrumb-item>
              <el-breadcrumb-item>运动秒杀</el-breadcrumb-item>
              <el-breadcrumb-item>五周年庆</el-breadcrumb-item>
              <el-breadcrumb-item>电视秒杀</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row>
              <el-col :span="4" :xs="3">
                <el-tag type="warning">优惠</el-tag>
              </el-col>
              <el-col :span="4" :xs="3">
                <el-tag type="warning">秒杀</el-tag>
              </el-col>
              <el-col :span="4" :xs="5">
                <el-tag type="primary">plus会员</el-tag>
              </el-col>
              <el-col :span="4" :xs="5">
                <el-tag type="info">品牌闪购</el-tag>
              </el-col>
              <el-col :span="4" :xs="4">
                <el-tag type="success">拍卖</el-tag>
              </el-col>
              <el-col :span="4" :xs="4">
                <el-tag type="success">家电</el-tag>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="4"
        ><el-image src="/static/img/beij.jpg"></el-image
      ></el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :xs="24">
        <el-row>
          <el-col :span="24">
            <ul>
              <li>
                <a href="//jiadian.jd.com">家用电器</a>
                <a>手机</a>
                <a>运营商</a>
                <a>数码</a>
                <a>电脑</a>
                <a>办公</a>
              </li>
            </ul>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="16" :xs="24">
        <el-row>
          <el-col :span="18" :xs="24">
            <el-image src="/static/img/cp.jpg" style="height: 300px"></el-image>
          </el-col>
          <el-col :span="5" :xs="24">
            <el-row>
              <el-col :span="24" :xs="8">
                <el-image src="/static/img/cp.jpg"></el-image>
              </el-col>
              <el-col :span="24" :xs="8">
                <el-image src="/static/img/cp5.jpg"></el-image>
              </el-col>
              <el-col :span="24" :xs="8">
                <el-image src="/static/img/cp6.jpg"></el-image>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="24">
        <el-row>
          <el-col :span="20" :xs="24">
            <el-row>
              <el-col :span="8" :xs="8"
                ><el-image
                  src="/static/img/cp6.jpg"
                  style="margin-top: 3px"
                ></el-image
              ></el-col>
              <el-col :span="16" :xs="16">
                <div v-if="!admin">
                  <span>欢迎使用</span> <br />
                  <router-link to="/deng">登录</router-link>
                  <router-link to="/zhu">注册</router-link>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" :xs="8">
                <el-button type="primary" plain>新人福利</el-button>
              </el-col>
              <el-col :span="24" :xs="8">
                <el-button type="warning" plain>plus会员</el-button>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row>
              <el-col :span="12" :xs="12"><strong>京东快报</strong></el-col>
              <el-col :span="6" :push="6" :xs="6"><p>更多 ></p></el-col>
            </el-row>
            <el-row>
              <el-col :span="24" :xs="24"
                ><span
                  ><el-tag type="warning">HOT</el-tag>钓鱼技术学习</span
                ></el-col
              >
              <el-col :span="24" :xs="24"
                ><span
                  ><el-tag type="warning">热评</el-tag>多功能家用按摩</span
                ></el-col
              >
              <el-col :span="24" :xs="24"
                ><span
                  ><el-tag type="warning">热议</el-tag>纸尿裤多久更换</span
                ></el-col
              >
              <el-col :span="24" :xs="24"
                ><span
                  ><el-tag type="warning">热评</el-tag>实时录音转文字</span
                ></el-col
              >
            </el-row>
            <el-row>
              <el-col :span="24" :xs="24">
                <el-tabs value="first" style="font-size: 11px">
                  <el-tab-pane label="话费" name="first">
                    <span
                      :a="1"
                      data-set="jx"
                      @mouseenter="show"
                      @mouseleave="color"
                      >话费充值</span
                    >
                    <span
                      :b="2"
                      data-set="2"
                      @mouseenter="show"
                      @mouseleave="color"
                      >流量充值</span
                    >
                    <span
                      :c="3"
                      data-set="3"
                      @mouseenter="show"
                      @mouseleave="color"
                      >套餐变更</span
                    >
                    <el-row v-if="index == 1">
                      <el-col :span="24" :xs="24">1</el-col>
                    </el-row>
                    <el-row v-if="index == 2">
                      <el-col :span="24" :xs="24">2</el-col>
                    </el-row>
                    <el-row v-if="index == 3">
                      <el-col :span="24" :xs="24">3</el-col>
                    </el-row>
                  </el-tab-pane>
                  <el-tab-pane label="机票" name="second">机票</el-tab-pane>
                  <el-tab-pane label="酒店" name="thred">酒店</el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :xs="24"
        ><el-tag type="warning" id="ms">限时秒杀</el-tag><br />
        {{ time }}
      </el-col>
      <el-col :span="4" :xs="24">
        <el-row>
          <el-col :span="20" :xs="24">
            <el-image src="/static/img/fw.jpg" style="height: 150px"></el-image>
            <span>好看</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="8">
        <el-row>
          <el-col :span="20" :xs="24">
            <el-image src="/static/img/hf.jpg" style="height: 150px"></el-image>
            <span>好看</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="8">
        <el-row>
          <el-col :span="20" :xs="24">
            <el-image src="/static/img/jd.jpg" style="height: 150px"></el-image>
            <span>好看</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="8">
        <el-row>
          <el-col :span="20" :xs="24">
            <el-image src="/static/img/yc.jpg" style="height: 150px"></el-image>
            <span>好看</span>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4" :xs="24">
        <el-carousel height="150px" trigger="hover" setActiveName="car">
          <el-carousel-item name="a" label="d">
            <el-image src="/static/img/lx.jpg" style="height: 150px"></el-image>
          </el-carousel-item>
          <el-carousel-item name="b" label="e">
            <el-image src="/static/img/cx.jpg" style="height: 150px"></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12" :xs="24">
        <el-row>
          <el-col :span="12" :xs="24">
            <strong id="mr">
              每日特价<span class="el-icon-arrow-right"></span
            ></strong>
          </el-col>
          <el-col :span="12" :xs="24">
            <el-breadcrumb separator=" ">
              <el-breadcrumb-item
                ><span data-set="jx" @mouseenter="showt" @mouseleave="colort"
                  >精选</span
                ></el-breadcrumb-item
              >
              <el-breadcrumb-item
                ><span data-set="sm" @mouseenter="showt" @mouseleave="colort"
                  >数码</span
                ></el-breadcrumb-item
              >
              <el-breadcrumb-item
                ><span data-set="ms" @mouseenter="showt" @mouseleave="colort"
                  >美食</span
                ></el-breadcrumb-item
              >
              <el-breadcrumb-item
                ><span data-set="bh" @mouseenter="showt" @mouseleave="colort"
                  >百货</span
                ></el-breadcrumb-item
              >
              <el-breadcrumb-item
                ><span data-set="yg" @mouseenter="showt" @mouseleave="colort"
                  >预告</span
                ></el-breadcrumb-item
              >
            </el-breadcrumb>
          </el-col>
        </el-row>
      </el-col>

      <el-col :span="12" :xs="24"> </el-col>
    </el-row>

    <el-row> </el-row>
    <el-backtop :visibility-height="he">
      <el-dropdown placement="top">
        <span class="el-icon-arrow-up"></span>
        <el-dropdown-menu>
          <el-dropdown-item
            ><el-link href="#sy">首页</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#mr">每日特价</el-link></el-dropdown-item
          >
          <el-dropdown-item
            ><el-link href="#ms">限时秒杀</el-link></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-backtop>
    <userShow ref="userShow"></userShow>
  </div>
  <!--颈部-->
</template>

<script>
import axios from "axios";
import qs from "qs";
import userShow from './shouYe/userInfoShow'
export default {
  props: {
    a: {
      type: String,
    },
    b: {
      type: String,
    },
    c: {
      type: String,
    },
  },
  mounted() {
    this.admin = this.$route.params.name;
  },
  data() {
    return {
      admin: "",
      st: "a",
      he: 20,
      url: "/static/fz/",
      list: [
        { index: "4", name: "dx1.jpg" },
        { index: "5", name: "dx2.jpg" },
        { index: "6", name: "dxnv2.jpg" },
        { index: "7", name: "dx3.jpg" },
      ],
      img: [
        { index: "0", name: "ck1.jpg" },
        { index: "1", name: "ck2.jpg" },
        { index: "2", name: "ck3.jpg" },
        { index: "3", name: "dxnv3.jpg" },
      ],
      goods: "jx",
      time: new Date().toLocaleString(),
      car: "a",
      index: 1,
      tabs: "first",
      user: "/static/img/cx.jpg",
      form: {
        sou: "",
      },
      msg: "",
      tu: "@/static/img/beij.jpg",
      t: "",
      fz: "my",
      sel: "",
      x: "",
      xz: "",

      item: [
        {
          label: "旗袍",
          value: "旗袍",
        },
        {
          label: "长裤",
          value: "长裤",
        },
        {
          label: "毛衣",
          value: "毛衣",
        },
        {
          label: "短袖",
          value: "短袖",
        },
      ],
    };
  },
  created() {
    let n = -1;
    console.log(this.$attrs);
    this.$emit("aa", "sasa");
    this.t = setInterval((x) => {
      n = n + 1;
      if (n == this.list.length) {
        n = 0;
      }
      this.img.shift();
      this.img.push(this.list[n]);

      //console.log(s)
      //console.log(this.img)
    }, 4000);
    this.$store.dispatch("search");
  },
  destroyed() {
    clearInterval(this.t);
  },
  methods: {
    str: function () {
      this.$store.dispatch("hel");
    },
    userInfoShow: function () {
      this.$refs.userShow.dialogVisible = true
    },
    it: function (value) {
      this.form.sou = value;
    },
    handleSelect(value) {
      console.log(value);
    },
    querySearch(query, cd) {
      console.log(123);

      const text = this.$store.state.text;

      var results = query
        ? text.filter((restaurant) => {
            //过滤函数变量数组类数字返回操作值
            if (restaurant.value.indexOf(query) === 0) {
              //类数组里面必须要有一个value自定义属性才能获取变量
              return restaurant; //在生命周期created加载的时候是先数据然后再是方法
              //
            } //类数组过滤索引内容把符合条件的索引留下
            // console.log(restaurant)
            // return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
          })
        : text;
      // 调用 callback 返回建议列表的数据

      cd(results); //返回对象js里面数组是对象数据类型是object
      //生命周期
    },
    sou: function () {
      this.$store.state.search = this.form.sou;
    },
    push() {
      this.$router.push({
        name: "deng",
      });
    },
    get: function () {
      const admin = {
        params: {
          //get提交
          user: "liu",
          pass: "yong",
        },
      };
      const header = {
        headers: { "Content-Type": "application/json" },
      };
      axios
        .get("http://localhost:8081/", admin, header)
        .then((response) => {
          this.msg = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    post: function () {
      const admin = {
        user: "liu",
        pass: "yong",
      };
      const header = {
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
      };
      axios
        .post("http://localhost:8081/", qs.stringify(admin), header)
        .then((response) => {
          this.msg = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    del: function () {},
    put: function () {},
    show: function (e) {
      console.log(e);
      this.index = e.target.dataset.set;

      e.target.style.color = "red";
    },
    color: function (e) {
      e.target.style.color = "black";
    },
    showt: function (e) {
      console.log(e);
      this.goods = e.target.dataset.set;

      e.target.style.color = "red";
    },
    colort: function (e) {
      e.target.style.color = "black";
    },
    fza: function (e) {
      this.fz = e.target.dataset.fz;
      e.target.style.color = "salmon";
    },
    fzb: function (e) {
      e.target.style.color = "skyblue";
    },
  },
  components: {
    userShow
  }
};
</script>

<style lang="less">
  .shou-main {
    .info.el-link.is-underline:hover:after {
      border: 0px solid white ;
    }
    .userInfo:hover .el-tag{
      cursor: pointer;
    }
  }
</style>